<template>
    <div class="search-suggestion">
        <van-cell icon="search" v-for="(item, index) in suggestionsList" :key="index" @click="$emit('searchSuggestion', item)">
            <template #title>
                <div v-html="highlightText(item)"></div>
            </template>
        </van-cell>
    </div>
</template>

<script>
import { getSearchSuggestion } from '@/api/search'

// 按需加载防抖工具包
import { debounce } from 'lodash'

export default {
    name: 'SearchSuggestion',
    props: {
        searchText: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            suggestionsList: [] //联想建议列表
        }
    },
    watch: {
        searchText: {
            // 当 searchText 值发生变化时，会触发handler
            // debounce()第1参数为：被执行的函数，第2参数为：延迟执行时间
            handler: debounce(function(newVal) {
                this.loadSearchSuggestion(newVal)
            }, 300),
            // 立即执行一次监听回调
            immediate: true
        }
    },
    methods: {
        // 获取联想建议
        loadSearchSuggestion(val) {
            getSearchSuggestion(val).then(({data}) => {
                console.log(data)
                this.suggestionsList = data.data.options
            }).catch((err) => {
                this.$toast('数据获取失败，请稍后重试')
            })
        },

        // 高亮文本
        highlightText(val) {
            // /this.searchText/gi 这种写法不对，//中间的内容都会被当作匹配字符，我们需要使用RegExp()
            //RegExp()为正则表达式构造函数，g全局搜索 i不区分大小写
            const reg = new RegExp(this.searchText, 'gi')
            if(reg.test(val) === true) {
                // reg.test() 判断文本中是否含有reg字符
                return val.replace(reg,  `<span style="color: #3296fa">${this.searchText}</span>`)
            } else {
                return val
            }
        }
    }
}
</script>

<style lang="less" scoped></style>